import request from '../../utils/request'
import PubSub from 'pubsub-js'
import moment from 'moment'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: true,
    songId: '',
    songDetail: {},
    songUrl: '',
    startTime: '00:00',
    endTime: '00:00',
    width: ''
  },
  // 点击播放或者暂停按钮切换状态
  handleMusicPlay() {
    let isPlay = !this.data.isPlay
    this.setData({
      isPlay
    })
    //控制音乐的播放和暂停
    this.playOrPauseMusic()
  },

  // 播放或者暂停音乐
  playOrPauseMusic() {
    let isPlay = this.data.isPlay
    isPlay ? this.player.play() : this.player.pause()
  },
  // 获取音乐的详情数据
  async getSongDetail() {
    const result = await request('/song/detail', {
      ids: this.data.songId
    })
    if (result.code === 200) {
      // console.log(result)
      this.setData({
        songDetail: {
          id: result.songs[0].id,
          name: result.songs[0].name,
          imgUrl: result.songs[0].al.picUrl
        }
      })
      // 动态设置navBar当中的文本
      wx.setNavigationBarTitle({
        title: result.songs[0].name,
      })
    }
  },
  // 根据歌曲id获取歌曲的播放地址
  async getSongUrl() {
    const result = await request('/song/url', {
      id: this.data.songId
    })
    if (result.code === 200) {
      // console.log(result)
      this.setData({
        songUrl: result.data[0].url
      })
    }
  },
  // 点击上一曲和下一曲
  handleSwitch(e) {
    let type = e.target.id

    PubSub.publish('songType', type)

  },
  // 播放
  async autoPlay(songId) {
    this.setData({
      songId,
      isPlay: true
    })
    // 播放音乐的逻辑
    // 首先要发请求获取当前点击的这个音乐的详情数据
    await this.getSongDetail()
    // 获取歌曲的路径进行播放
    await this.getSongUrl()
    // 创建播放器，播放音乐
    this.player = wx.getBackgroundAudioManager()
    // 下面的两个属性必须设置才能播放音乐
    this.player.src = this.data.songUrl
    this.player.title = this.data.songDetail.name
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
   await this.autoPlay(options.songId) 
    //  监听系统播放器的状态
    this.player.onPlay(() => {
      this.setData({
        isPlay: true
      })
    })
    // 监听暂停
    this.player.onPause(() => {
      this.setData({
        isPlay: false
      })
    })
    // 监听音乐是否播放完成，完成后自动播放下一曲
    this.player.onEnded(() => {
      PubSub.publish('songType','next')
    })
     // 监听音乐的播放进度
    this.player.onTimeUpdate(() => {
      // 可以获取播放的当前时间和歌曲的总时间，但是都是以秒为单位的
      // 我们要的是分钟和秒，需要自己格式化时间  moment包的使用
      // console.log(this.player.duration,this.player.currentTime)
      // moment()传递的是要求格式话的事件，要求是毫秒
      let startTime = moment(this.player.currentTime*1000).format('mm:ss')
      let endTime = moment(this.player.duration*1000).format('mm:ss')
      // width / 450 = 当前时间 / 总时间
      let width = this.player.currentTime / this.player.duration * 450 + 'rpx'
      this.setData({
        startTime,
        endTime,
        width
      })
    })
    // 订阅上一首和下一首的播放
    PubSub.subscribe('songId', async (msg, songId) => {
     await this.autoPlay(songId)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})